<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<div class="flexbetween">
			<div class="text_ht color_zero">我的老师</div>
			<div class="flexleft">
				<div class="themeBtnBgSmall margin_right2 pointer" @click="goProcess()">审核进度</div>
				<div class="themeBtnBg pointer" @click="dialogVisible=true">添加老师</div>
			</div>
		</div>
		<!-- 列表 -->
		<div class="contentBox mainpadding flexbetween margin_top" v-for="item in list.data">
			<div class="flexleft">
				<img class="userImg margin_right1" :src="item.teacher.avatar" alt="">
				<div>
					<div class="text_ft color_three">{{item.teacher.username}}</div>
					<div class="flexleft flex_wrap">
						<div class="tagBox margin_top2 margin_right2">班级：{{item.classname}}</div>
						<div class="tagBox margin_top2 margin_right2">科目：{{item.subject.name}}</div>
						<div class="tagBox margin_top2 margin_right2">电话：{{item.mobile}}</div>
					</div>
				</div>
			</div>
			<div class="withdrawBox" @click="jiebang(item.id)">
				<i class="el-icon-connection" style="color: #FF0000;margin-right: 5px;"></i>
				<span class="text_f color_red pointer">解绑</span>
			</div>
		</div>
		<div class="flexcenter margin_top" v-if="list.total > 15">
			<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
				@current-change="tuijianchange">
			</el-pagination>
		</div>
		<!-- 添加老师 -->
		<el-dialog title="添加老师" :visible.sync="dialogVisible" width="30%" center top="30vh" :before-close="handleClose">
			<div class="flexleft">
				<div class="text_d color_zero white_nowrap margin_right1">老师手机号：</div>
				<el-input v-model="mobile" placeholder="请输入老师手机号"></el-input>
			</div>
			<div class="flexleft margin_top2 margin_left1">
				<div class="text_d color_zero white_nowrap">选择学科：</div>
				<el-select v-model="xueke" placeholder="请选择学科" no-data-text="当前年级暂无学科,请更换年级">
					<el-option v-for="item in xkoptions" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</div>
			<div class="flexleft margin_top2">
				<div class="text_d color_zero white_nowrap margin_right1">请输入班级：</div>
				<el-input v-model="classname" placeholder="请输入班级"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		my_teacherList,
		del_myteacher,
		add_myteacher,
	} from "@/API/my_teacher"
	import {
		getsubject
	} from "@/API/question"
	export default {
		data() {
			return {
				dialogVisible: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				type: "",
				nianjiList:{},
				xkoptions: [],
				xueke:"",//学科id
				mobile:"",
				classname:"",
			}
		},
		created() {
			this.$bus.$on("changemsg", data => {
				this.nianjiList = JSON.parse(localStorage.getItem("njInfo"))
				this.xueke = ""
				this.getXkList()
			})
		},
		mounted() {
			this.nianjiList = JSON.parse(localStorage.getItem("njInfo"))
			this.init()
			this.getXkList()
		},
		methods: {
			submit(){
				if(this.mobile==""){
					this.$message.warning("请输入老师手机号")
					return false
				}
				if(this.xueke==""){
					this.$message.warning("请选择学科")
					return false
				}
				if(this.classname==""){
					this.$message.warning("请输入班级")
					return false
				}
				add_myteacher({
					mobile:this.mobile,
					classname:this.classname,
					education_subject_id:this.xueke,
				}).then(res => {
					if(res.data.code==1){
						this.dialogVisible = false
						this.$message.success(res.data.msg)
						this.mobile = ""
						this.classname = ""
						this.xueke = ""
					}else{
						this.$message.error(res.data.msg)
					}
				})
			},
			getXkList() { //获取学科数据
				let data = {
					education_grade_id:this.nianjiList.id,
					period: this.nianjiList.period
				}
				getsubject(data).then(res => {
					this.xkoptions = res.data.data
				})
			},
			jiebang(id) {
				this.$confirm('确定解绑吗？')
					.then(_ => {
						del_myteacher({
							id
						}).then(res => {
							if (res.data.code == 1) {
								this.$message.success(res.data.msg)
								this.tuijianchange(1)
							}else{
								this.$message.error(res.data.msg)
							}
						})
					})
					.catch(_ => {});
			},
			init(page) {
				my_teacherList({
					page: page || 1,
					state: 2
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			},
			goProcess() { //审核进度
				this.$router.push({
					path: "/mine/mineTeacherProcess"
				})
			},
			handleClose(done) {
				done();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.themeBtnBgSmall {
		padding: 5px 10px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 4px;
		border: 1px solid #3478F5;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	.themeBtnBg {
		padding: 5px 10px;
		background-color: #3478F5;
		border-radius: 4px;
		border: 1px solid #3478F5;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}

	.contentBox {
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #EAEAEA;
	}

	.userImg {
		width: 77px;
		min-width: 77px;
		height: 77px;
		border-radius: 50%;
	}

	/* 标签 */
	.tagBox {
		padding: 5px 15px;
		background: rgba(52, 120, 245, .1);
		border-radius: 4px 4px 4px 4px;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	.withdrawBox {
		padding: 3px 10px;
		border-radius: 5px 5px 5px 5px;
		border: 1px solid #FF0000;
	}

	::v-deep .el-dialog {
		border-radius: 8px;
	}

	::v-deep .el-dialog__title {
		font-size: 20px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.margin_left1 {
		margin-left: 25px;
	}

	::v-deep .el-select {
		flex: 1;
	}
</style>